<template>
	<view class="">
		<view class="right-section">
			<view class="section-hd acea-row row-center-wrapper">
				<view class="title acea-row row-center row-bottom"><text
						class="iconfont icon-huiyuan2"></text>{{$t(`代理尊享权`)}}
				</view>
			</view>
			<view class="section-bd acea-row row-between-wrapper">
				<view v-for="item in memberRights" :key="item.id" class="acea-row row-middle item">
					<image class="image" :src="item.pic"></image>
					<view class="text">
						<view class="name">{{item.title}}</view>
						<view>{{item.explain}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="type-section" id="card">
			<view class="title">
				<view class="bold">申请代理</view>
			</view>
			<scroll-view class="scroll" scroll-x="true">
				<view v-for="item in memberType" :key="item.type" class="item" :class="{on: item.id === mc_id}"
					@click="checkType(item)">
					<view>{{item.title}}</view>
					<!-- <view class="new">{{$t(`￥`)}}<text class="num">100</text></view> -->
				</view>
			</scroll-view>
			<!-- 区代理选择 -->
			<picker mode="multiSelector" @change="bindregion1Change1" @columnchange="bindMultiPickerColumnChange1"
				:value="valueregion1" :range="multiArray1">
				<view class='acea-row'>
					<view class="picker">{{region1[0]}}，{{region1[1]}}，{{region1[2]}}</view>
					<view class='iconfont icon-dizhi fontcolor'></view>
				</view>
			</picker>
			<!-- 市代理选择 -->
			<picker mode="multiSelector" @change="bindregion1Change11" @columnchange="bindMultiPickerColumnChange11"
				:value="valueregion11" :range="multiArray11">
				<view class='acea-row'>
					<view class="picker">{{region11[0]}}，{{region11[1]}}，{{region11[2]}}</view>
					<view class='iconfont icon-dizhi fontcolor'></view>
				</view>
			</picker>
			<view class="buy" @click="pay">立即申请</view>
			<view class="cash">

			</view>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import home from '@/components/home';
	import {
		mapGetters
	} from "vuex";
	import {
		usercityapply,
		getCity
	} from "@/api/api.js"
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		components: {
			home
		},
		data() {
			return {
				memberType: [{
					title: "区代理",
					id: 1
				}, {
					title: "市代理",
					id: 2
				}],
				memberRights: [{
					pic: "https://pyg.5gwind.cn/statics/system_images/member_price.png",
					title: "市代理",
					explain: "享受20%折扣"
				}, {
					pic: "https://pyg.5gwind.cn/statics/system_images/member_price.png",
					title: "区代理",
					explain: "享受10%折扣"
				}],
				mc_id: 1,
				// 区代理----
				region1: [this.$t(`省`), this.$t(`市`), this.$t(`区`)],
				valueregion1: [0, 0, 0],
				district1: [],
				multiArray1: [],
				multiIndex1: [0, 0, 0],
				cityId1: 0,
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			if (this.isLogin) {
				this.getCityList();
			} else {
				toLogin();
			}
		},
		onShow() {},
		onReachBottom() {},

		methods: {
			// 回去地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					this.district1 = res.data
					that.initialize1();
				})
			},
			// 区代理选择
			initialize1() {
				let that = this,
					province = [],
					city = [],
					area = [];
				let cityChildren = that.district1[0].c || [];
				let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
				that.district1.forEach((item, i) => {
					province.push(item.n);
					if (item.n === this.region1[0]) {
						this.valueregion1[0] = i
						this.multiIndex1[0] = i
					}
				});
				that.district1[this.valueregion1[0]].c.forEach((item, i) => {
					if (this.region1[1] == item.c) {
						this.valueregion1[1] = i
						this.multiIndex1[1] = i
					}
					city.push(item.n);
				});
				that.district1[this.valueregion1[0]].c[this.valueregion1[1]].c.forEach((item, i) => {
					if (this.region1[2] == item.c) {
						this.valueregion1[2] = i
						this.multiIndex1[2] = i
					}
					area.push(item.n);
				});
				this.multiArray1 = [province, city, area]

			},
			bindregion1Change1: function(e) {
				let multiIndex1 = this.multiIndex1,
					province = this.district1[multiIndex1[0]] || {
						c: []
					},
					city = province.c[multiIndex1[1]] || {
						v: 0
					},
					multiArray1 = this.multiArray1,
					value = e.detail.value;

				this.region1 = [multiArray1[0][value[0]], multiArray1[1][value[1]], multiArray1[2][value[2]]]
				// this.$set(this.region1,0,multiArray1[0][value[0]]);
				// this.$set(this.region1,1,multiArray1[1][value[1]]);
				// this.$set(this.region1,2,multiArray1[2][value[2]]);
				this.cityId1 = city.v
				this.valueregion1 = [0, 0, 0]
				this.initialize1();
				console.log("选择的城市的cityId1", this.cityId1);
			},
			bindMultiPickerColumnChange1: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district1[value] || {
						c: []
					},
					multiArray1 = that.multiArray1,
					multiIndex1 = that.multiIndex1;
				multiIndex1[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.c[0] || {
							c: []
						};
						multiArray1[1] = currentCity.c.map((item) => {
							return item.n;
						});
						multiArray1[2] = areaList.c.map((item) => {
							return item.n;
						});
						break;
					case 1:
						let cityList = that.district1[multiIndex1[0]].c[multiIndex1[1]].c || [];
						multiArray1[2] = cityList.map((item) => {
							return item.n;
						});
						break;
					case 2:

						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray1, 0, multiArray1[0]);
				this.$set(this.multiArray1, 1, multiArray1[1]);
				this.$set(this.multiArray1, 2, multiArray1[2]);
				// #endif
				// #ifdef H5 
				this.multiArray1 = multiArray1;
				// #endif



				this.multiIndex1 = multiIndex1
				// this.setData({ multiArray1: multiArray1, multiIndex1: multiIndex1});
			},
			
			pay() {
				if (this.type === 'free') {
					this.createMemberCard('weixin');
				} else {
					this.pay_close = true;
				}
			},
			checkType(svip) {
				this.type = svip.type;
				this.svip = svip;
				this.totalPrice = svip.pre_price
				this.mc_id = svip.id
			},
			getMemberCard() {
				memberCard().then(res => {
					let data = res.data;
					this.memberType = data.member_type;
					this.memberRights = data.member_rights;
					this.isGetFree = data.is_get_free;
				}).catch(err => {

				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.card-section {
		height: 328rpx;
		padding: 88rpx 66rpx 0;
		background: #FFFFFF url("") center/100% 100% no-repeat;

		.image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.text {
			flex: 1;
			margin-left: 15rpx;
			font-size: 22rpx;
			line-height: 30rpx;
			color: #89735B;
		}

		.name {
			margin-bottom: 2rpx;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #333333;
			max-width: 360rpx;
		}

		.info {
			margin-top: 74rpx;
			font-size: 24rpx;
			color: #AE5A2A;
		}

		.num {
			font-size: 36rpx;
		}

		.btn {
			width: 146rpx;
			height: 44rpx;
			border-radius: 22rpx;
			background-color: #FFFFFF;
			line-height: 44rpx;
			text-align: center;
		}
	}

	.right-section {
		background-color: #FFFFFF;

		.section-hd {
			padding-top: 34rpx;
			padding-bottom: 34rpx;

			.title {
				width: 543rpx;
				height: 90rpx;
				background: url("") center/cover no-repeat;
				font-weight: bold;
				font-size: 34rpx;
				line-height: 1.1;
				color: #89735B;
			}

			.iconfont {
				font-size: 34rpx;
				color: #89735B;
			}
		}

		.section-bd {
			padding: 0 30rpx 15rpx;

			.item {
				width: 338rpx;
				height: 140rpx;
				padding-left: 30rpx;
				border-radius: 6rpx;
				margin-bottom: 14rpx;
				background-color: #F7F7F7;
			}

			.image {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				flex: 1;
				min-width: 0;
				margin-left: 22rpx;
				overflow: hidden;
				white-space: nowrap;
				font-size: 24rpx;
				line-height: 33rpx;
				color: #9A856D;
			}

			.name {
				margin-bottom: 2rpx;
				font-size: 26rpx;
				line-height: 37rpx;
				color: #333333;
			}
		}
	}

	.type-section {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.title {
			padding: 26rpx 30rpx 0;
			font-size: 24rpx;
			color: #797979;

			.bold {
				display: inline-block;
				margin-right: 14rpx;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #333333;

				+view {
					display: inline-block;
				}
			}

			.time {
				margin-left: 14rpx;
				font-size: 24rpx;
				color: #AE5A2A;
			}
		}

		.scroll {
			white-space: nowrap;
		}

		.item {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 210rpx;
			height: 232rpx;
			border-radius: 12rpx;
			margin: 32rpx 30rpx 30rpx 0;
			box-shadow: 0 3rpx 30rpx rgba(0, 0, 0, 0.1);
			font-size: 30rpx;
			line-height: 42rpx;
			color: #754E19;

			&:first-child {
				margin-left: 30rpx;
			}

			&.on {
				border: 3rpx solid #FCC282;
				background-color: #FEF7EC;
			}
		}

		.new {
			margin-top: 22rpx;
			font-weight: 600;
			font-size: 34rpx;

			.num {
				font-size: 48rpx;
				line-height: 48rpx;
			}
		}

		.old {
			margin-top: 13rpx;
			text-decoration: line-through;
			font-size: 24rpx;
		}

		.info {
			margin-top: 13rpx;
			font-size: 24rpx;
		}

		.agree {
			font-size: 22rpx;
			text-align: center;
			color: #797979;

			.link {
				display: inline-block;
			}

			.mark {
				color: #AE5A2A;
			}
		}

		.buy {
			height: 80rpx;
			border-radius: 12rpx;
			margin: 30rpx 30rpx 0;
			background: linear-gradient(90deg, #FEE2B7 0%, #FDC383 100%);
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
			color: #5D3324;
		}

		.cash {
			padding-top: 26rpx;
			padding-bottom: 29rpx;
			font-size: 28rpx;
			text-align: center;
			color: #754E19;
		}
	}

	.coupon-section {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.section-hd {
			padding: 26rpx 30rpx 0;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #333333;
			}

			.link {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #89735B;

				.iconfont {
					margin-left: 6rpx;
					font-size: 14rpx;
				}
			}
		}

		.section-bd {
			white-space: nowrap;

			.item {
				display: inline-flex;
				width: 360rpx;
				height: 148rpx;
				margin: 26rpx 20rpx 30rpx 0;
				background: url("") center/cover no-repeat;

				&:first-child {
					margin-left: 30rpx;
				}

				&:last-child {
					margin-right: 30rpx;
				}

				&.gray {
					background-image: url("");

					.btn {
						color: #9F9F9F;
					}

					.money {
						color: #fff;

						.num {
							color: #fff;
						}
					}

					.name {
						color: #fff;
					}

					.text {
						color: #9F9F9F;
					}

					.mark {
						color: #A8A8A8;
					}
				}

				.btn {
					width: 52rpx;
					padding-right: 14rpx;
					padding-left: 14rpx;
					white-space: pre-wrap;
					font-size: 24rpx;
					color: #5D3324;
				}

				.text {
					max-width: 160rpx;
					margin-left: 14rpx;
				}

				.name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #5D3324;
				}

				.mark {
					display: inline-block;
					height: 35rpx;
					padding-right: 14rpx;
					padding-left: 14rpx;
					border-radius: 19rpx;
					margin-top: 6rpx;
					background-color: rgba(255, 255, 255, 0.3);
					font-size: 22rpx;
					line-height: 35rpx;
					color: #5F3426;
				}

				.money {
					max-width: 170rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 800;
				}

				.num {
					position: relative;
					font-size: 54rpx;
					color: #333333;
				}
			}
		}
	}

	.goods-section {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.section-hd {
			padding: 26rpx 30rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 45rpx;
			color: #333333;
		}

		.section-bd {
			padding: 0 30rpx 0 7rpx;
			margin-top: 26rpx;

			.item {
				width: 215rpx;
				padding-bottom: 24rpx;
				margin-left: 23rpx;
			}

			.image {
				width: 215rpx;
				height: 215rpx;
				border-radius: 6rpx;
			}

			.name {
				margin-top: 10rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 26rpx;
				line-height: 37rpx;
				color: #333333;
			}

			.svip-price {
				margin-top: 6rpx;
				font-size: 26rpx;
				color: #333333;

				image {
					width: 60rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}

			.shop-price {
				margin-top: 4rpx;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}

	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 10;
		width: 600rpx;
		height: 634rpx;
		padding: 60rpx 40rpx 0;
		margin-top: -79rpx;
		background: url("") center/100% 100% no-repeat;
		transform: translate(-50%, -50%) scale(0);
		transition: 0.3s;

		&.on {
			transform: translate(-50%, -50%) scale(1);
		}

		.cont {
			padding: 20rpx;
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 45rpx;
			padding-bottom: 45rpx;

			.line {
				width: 70rpx;
				height: 2rpx;
				background-color: #E6C3A5;
			}

			.name {
				margin-right: 25rpx;
				margin-left: 25rpx;
				font-size: 40rpx;
				color: #89735B;
			}
		}

		.form {
			.input {
				padding-right: 50rpx;
				padding-left: 50rpx;
				height: 98rpx;
				border-radius: 12rpx;
				margin-bottom: 35rpx;
				background: rgba(255, 187, 129, 0.15);
				font-size: 30rpx;
			}

			.button {
				height: 72rpx;
				border-radius: 36rpx;
				margin: 45rpx 80rpx 20rpx;
				background: #353841;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #FFFFFF;
			}
		}

		.image {
			position: absolute;
			top: -57rpx;
			left: 50%;
			width: 146rpx;
			height: 114rpx;
			transform: translateX(-50%);
		}

		.iconfont {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			background: none;
			transform: translateX(-50%);
			font-size: 48rpx;
			line-height: 1;
			color: #FFFFFF;
		}
	}
</style>